<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件委托</title>
	</head>
	<body>
		<ul>
			<li>1111</li>
			<li>2222</li>
			<li>3333</li>
			<li>4444</li>
		</ul>
		<li>2222</li>
		<br/>
		<button id="btn1">添加新的li</button>
		<button id="btn2">删除ul上的事件委托的监听器</button>
		
		<!-- 1.事件委托(委托/代理):
		  将多个子元素(li)的事件监听委托给父辈元素(ul)处理
		  监听回调是加在了父辈元素上
		  当操作任何一个子元素(li)时，事件会冒泡到父辈元素(ul)
		  父辈元素不会直接处理事件，而是根据event.target得到发生事件的子元素(li),通过这个子元素
		2.事件委托的2方:
		  委托方:业主 li
		  被委托方:中介 ul
		3.使用事件委托的好处
		  添加新的子元素,自动有事件响应处理
		  减少事件监听的数量:n==>1
		4.jQuery的事件委托API
		  设置事件委托:$(parentSelector).delegate(childrenSelector,eventName,callback)
		  移除事件委托:$(parentSelector).undelegate(eventName) -->
		
		<script type="text/javascript" src="../js/jquery-3.6.0.js"></script>
		<script type="text/javascript">
			// 设置事件委托
			$('ul').delegate('li','click',function(){
				this.style.background = 'red'
			})
			
			$('#btn1').click(function(){
				$('ul').append('<li>新增的li...</li>')
			})
			
			$('#btn2').click(function(){
				// 移除事件委托
				$('ul').undelegate('click')
			})
		</script>
	</body>
</html>
